<template>
<el-dialog v-model="visible" title="环形阵列" width="30%" draggable>
        <div>
            <el-row>
                <label for="cntPointInput" style="padding-right:10px;position: relative; left:10px">旋转中心</label>
                <el-button type="primary" @click="onSelPointOnMap">
                    图中选择
                </el-button>
                <el-input v-model="cntPoint" autofocus size="mini" :ref="cntPointInput" id="cntPointInput"></el-input>
            </el-row>
            <el-row>
                <label for="countInput" style="padding-right:10px;position: relative; left:10px">总数（包括源图形）</label>
                <el-input v-model="totalCount" autofocus size="mini" :ref="countInput" id="countInput"></el-input>
            </el-row>
            <el-row>
                <label for="angleSpanInput" style="padding-right:180px;position: relative; left:10px">间隔角度</label>
                <el-input v-model="angleSpan"  id="angleSpanInput" autofocus size="mini" 
                :ref="angleSpanInput"
                @input="onSpanInput">
                </el-input>
            </el-row>
            <el-row>
                <label for="totalAngleInput" style="padding-right:180px;position: relative; left:10px">总角度</label>
                <el-input v-model="totalAngle" autofocus size="mini" :ref="totalAngleInput" 
                id="totalAngleInput"
                @input="onTotalAngleInput">
                </el-input>
            </el-row>
        </div>
        <template #footer>
            <span class="dialog-footer">
                <el-button @click="visible = false">Cancel</el-button>
                <el-button type="primary" @click="onConfirm">
                    Confirm
                </el-button>
            </span>
        </template>
    </el-dialog>
</template>
    
<script  setup>
import { ref } from 'vue'
import { ElMessage } from 'element-plus';
import {LGXEnums}  from '../../script/canvas/common/sysenum'
const visible = ref(false)
const totalCount = ref(6)
const angleSpan = ref(60)
const btnname = ref('环形阵列')
const cntPoint = ref("0,0")
const totalAngle = ref(360)

var initDatas = function(){
    console.log("circle array initDatas --------------");
}

const onConfirm = () => {
    console.log("circle array confirm --------------");
    visible.value = false;
    window.mainctl.m_pEditINTF.ringArray(cntPoint.value,totalCount.value,angleSpan.value);
    window.mainctl.setMapWorkMode(LGXEnums.LGXWorkMode.ModifyMode);
}

const onSelPointOnMap = () =>{
    visible.value = false;
    window.selPointSrcDlgType = "circleArr";
    window.mainctl.setMapWorkMode(LGXEnums.LGXWorkMode.PickPointMode);
}

var onSpanInput = function (evt) {
  let spanVal = parseInt(angleSpan.value);
  if (spanVal == 0){
    angleSpan.value = 0;
  }

  let count = parseInt(totalCount.value);
  totalAngle.value = count*spanVal;
}

var onTotalAngleInput = function (evt) {
  let spanVal = parseInt(angleSpan.value);
  if (spanVal == 0){
    return ;
  }

  let totalAngleVal = parseInt(totalAngle.value);
  if (totalAngleVal == 0){
    return ;
  }
  totalCount.value = totalAngleVal/spanVal;
}

defineExpose({
    visible,
    btnname,
    initDatas,
    cntPoint
});

</script>
    